<template>
  <div>
    <div
      v-for="(item, index) in list"
      :key="index"
      :class="['question-item', 'normal']"
    >
      <div class="question-order">
        <div>题目{{ index + 1 }}：</div>
      </div>
      <div class="question-content">
        <a-card shadow="hover">
          <QuestionItem
            :type="(item as any)?.type"
            :data="item"
            :index="index"
            v-bind="attrs"
          />
        </a-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { useAttrs } from 'vue';
  import QuestionItem from './question-item.vue';

  const attrs = useAttrs();

  defineProps({
    list: {
      type: Array,
    },
  });
</script>

<style lang="scss" scoped>
  .no-question {
    margin: 30px 0;
    font-size: 14px;
  }

  .question-item {
    display: flex;
    place-content: center flex-start;
    margin-bottom: 20px;

    .question-order {
      flex: 60px 0 0;
      text-align: center;
    }

    .question-action {
      &:hover {
        color: #018fe5;
        cursor: pointer;
      }
    }

    .question-content {
      flex: 1;
    }
  }
</style>
